<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<div class="first">
			父级1
			<div class="second" style="display: none;">
			<ul>
				<li>子级1</li>
				<li>子级1</li>
				<li>子级1</li>
			</ul>
		</div>
		</div>
	
		<div class="first">
			父级2
			<div class="second" style="display: none;">
			<ul>
				<li>子级2</li>
				<li>子级2</li>
				<li>子级2</li>
			</ul>
		</div>
		</div>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
			 /*
			  *思路：当点击父级元素的时候，跟父级紧接这的div显示，同时与父亲同辈的下一个div隐藏
			  * 1.next()     后一个同级元素的范围。
			  * 2.siblings() 方法返回被选元素的所有同级元素
			  * 3.prev()前一个同级元素的范围
			  * 4.slideToggle
			  * 5.slideUp	
			  * */
			$(".first").click(function(){
				$(this).children().slideToggle();
				$(this).siblings().children().slideUp();
			})
			
			
			
			
		</script>
		
	</body>
</html>
